<template>
	<!-- 常用联系人管理 -->
	<view class="content b-t qxlj_back4">
		<view class="list b-b" v-for="(item, index) in personList" :key="index" @click="checkAddress(item)">
			<uni-swipe-action>
				<uni-swipe-action-item :options="options2"  @change="change" @click="bindClick($event,item)">
					<view class="wrapper">
						<view class="u-box">
							<uni-icons type="contact" color="#498FFF" size="20"></uni-icons>
							<text class="name">{{ item.Name }}</text>
							<text class="mobile">{{ item.Mobile }}</text>
						</view>
						<!-- <view class="address-box">
							<text class="address">身份证：{{item.CardNo}}</text>
						</view> -->
					</view>
					<!-- <text class="xicon  icon-edit-square" @click.stop="navToPersonManage('edit', item)"></text> -->
					<view class="editBtn" @click.stop="navToPersonManage('edit', item)">
						<image  src="../../static/images/orginPen.png" mode="widthFix"></image>
					</view>
					
				</uni-swipe-action-item>
			</uni-swipe-action>
			<image v-if="item.IsDefault * 1 === 1" class="default-tag" src="https://wzws.wanshanlundiao.cn/upload/img/20250414/202504142048456366.png" mode=""></image>
		</view>
		<button class="add-btn" @click="addPerson('add')">{{$t('contact.addContact')}}</button>
		<empty v-if="personList.length === 0 && loadingType === 'nomore'"  :title="$t('contact.noRelatedMessage')"></empty>
		<uni-load-more v-else :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { getUsersContactsList,deleteUsersContacts } from '@/api/mall.js';
import { mapState, mapMutations, mapActions } from 'vuex';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import empty from '@/components/empty.vue'
import uniSwipeAction from '../components/uni-swipe-action/uni-swipe-action.vue'
import uniSwipeActionItem from '../components/uni-swipe-action-item/uni-swipe-action-item.vue'
export default {
	components: {
		uniSwipeAction,
		uniLoadMore,
		empty,
		uniSwipeActionItem
	},
	data() {
		return {
			source: 0,
			index: 0,
			page: {
				Index:1,
				Size:10
			},
			loadingType: 'more',
			personList: [],
			options2: [ 
			{
				text: this.$t ? this.$t('contact.delete') : '删除',
				type: 2,
				style: {
					backgroundColor: '#dd524d'
				}
			}],
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.base.userInfo
		})
	},
	onLoad(option) {
		this.source = option.source;
		this.index = option.index || 0
		this.loadData();
	},
	methods: {
		async loadData(type = 'add', search={}) {
			try{
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else if (type === 'refresh') {
					this.loadingType = 'loading';
					this.page.index = 1;
				} else {
					this.loadingType = 'more'
				}
				
				const { Data,Total } = await getUsersContactsList({
					...this.page
				})
				
				if (type === 'refresh') {
					this.personList = [];
				}
				
				this.personList = this.personList.concat(Data)
				
				if (this.personList.length < Total) {
					this.loadingType = 'more'
					this.page.Index++
				} else {
					this.loadingType = 'nomore'
				}
			} catch(e) {
				this.loadingType = 'nomore'
			}
		},
		//选择地址
		checkAddress(item) {
			if (this.source == 1) {
				const personList = this.$api.prePage().personList
				const has = personList.some((row,index)=>{
		 			return  row.Id === item.Id && index !== this.index*1
				})
				
				if(has) {
					this.$api.msg(this.$t('contact.contactExists'))
					return
				}
				console.log('111111111')
				this.$api.prePage().addPersonInfo({person:item,index:this.index});
				console.log('22222222')
				uni.navigateBack();
			}
		},
		addPerson(type, item) {
			let _this = this
			this.navToPersonManage('add')
		},
		navToPersonManage(type,item) {
			let a = 'order'
			uni.navigateTo({
				url: `/user_subpages/person/add-person?type=${type}&data=${JSON.stringify(item)}&page=${a}`
			})
		},
		//添加或修改成功之后回调
		refreshList(data, type) {
			//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
			this.loadingType = 'more'
			this.loadData('refresh');
		},
		change(e) {
			// this.isOpened = e
		},
		bindClick(e,item) {
			let _this = this
			// 设为默认
			uni.showModal({
				content: this.$t('contact.deleteContactConfirm'),
				success: function (res) {
					if (res.confirm) {
						// console.log('用户点击确定');
						deleteUsersContacts({Id:item.Id}).then(res=>{
							_this.$api.msg(res.Msg)
							_this.refreshList()
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 120rpx;
	padding-top: 30rpx;
	// min-height: 100vh;
	background-color: #EEF5F3;
}
.content {
	position: relative;
	width: 90%;
	margin-left: 5%;

}
.list {
	display: flex;
	align-items: center;
	background: #fff;
	position: relative;
	padding: 10rpx 0;
	margin-bottom: 18rpx;
	border-radius: 10rpx;
	view {
		width: 100%;
	}
	&:after {
		position: absolute;
		width: 90%;
		bottom: 0;
		left: 5%;
		@include border1px;
	}
	.default-tag {
		position: absolute;
		top: 0;
		left: 0;
		width: 80rpx;
		height: 80rpx;
	}
	.editBtn{
		width: 15%;
		display: flex;
		align-items: center;
		height: 100rpx;
		font-size: 40rpx;
		color: $font-color-light;
		padding-left: 30rpx;
		padding-right: 20rpx;
		image{
			width: 30rpx;
		}
	}
}
.wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.address-box {
	display: flex;
	align-items: center;
	padding-left: 60rpx;
	.tag {
		font-size: 24rpx;
		color: $base-color;
		margin-right: 10rpx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
		line-height: 1;
	}
	.address {
		line-height: 60rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
}
.u-box {
	font-size: 28rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
	padding-left: 60rpx;
	.uni-icons {
		line-height: 60rpx;
	}
	.name {
		margin: 0 30rpx;
	}
}
.icon-edit-square {
	display: flex;
	align-items: center;
	height: 100rpx;
	font-size: 40rpx;
	color: $font-color-light;
	padding-left: 30rpx;
	padding-right: 20rpx;
}

.add-btn {
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 16rpx;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #498FFF;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba($uni-color-primary, 0.4);
}
</style>
